import { Box, HStack, Image, Text, VStack } from '@chakra-ui/react';
import React from 'react';
import { useAppSelector } from '../../redux/hooks';

export default function ResultsWinner(): JSX.Element {
  const { players } = useAppSelector((state) => state.game);

  const winner = players.reduce(
    (acc, player) => {
      const accScore = acc.score ?? 0;
      const playerScore = player.score ?? 0;
      return accScore > playerScore ? acc : player;
    },
    players[0] ?? { score: 0 },
  );

  return (
    <VStack
      align="flex-start"
      spacing={4} // Увеличено расстояние между элементами для визуального разделения
      p={5}
      border="2px solid"
      borderColor="teal.500"
      borderRadius="xl"
      boxShadow="2xl"
      bg="blue.200"
      width="full"
      maxWidth="md"
      m="0 auto"
      minHeight="60vh"
    >
      {winner && (
        <Text
          fontSize="3xl"
          fontWeight="bold"
          alignSelf="center"
          // color='yellow.400'
          // style={{
          //   textShadow: '1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000',
          // }}
        >
          Результаты:
        </Text>
      )}

      {winner && (
        <Box
          position="relative"
          width="100%"
          borderRadius="lg"
          p={1}
          mb={2}
          bg="purple.300"
          height="10"
          border="1px solid"
          borderColor="black"
        >
          {/* Имя победителя и его счет остаются внутри Box */}
          <HStack justify="space-between">
            <Text fontSize="2xl" fontWeight="bold">
              {winner.name}
            </Text>
            <Text fontSize="2xl">{winner.score}</Text>
            <Image
              src="/img/pngwing.com.png"
              width="50px"
              height="50px"
              position="absolute"
              right="16px"
              top="50%"
              transform="translateY(-50%)"
            />
          </HStack>
        </Box>
      )}

      {players
        .filter((player) => player.id !== winner.id)
        .map((player) => (
          <Box
            key={player.id}
            width="100%"
            borderRadius="lg"
            p={1}
            mb={2}
            bg="yellow.400"
            height={10}
            mt={1}
            border="1px solid"
            borderColor="black"
          >
            <HStack justify="space-between">
              <Text color="black" fontSize="2xl">
                {player.name}
              </Text>
              <Text color="black" fontSize="2xl">
                {player.score ?? 0}
              </Text>
            </HStack>
          </Box>
        ))}
    </VStack>
  );
}
